<template>
  <div>
    <el-collapse :value="[0]" style="padding: 0 20px 20px; border: none">
      <el-collapse-item
        v-for="(item, index) in value"
        :key="item.id"
        :title="item.checkPoint"
        :name="index"
      >
        <el-form-item label="是否符合">
          <el-select
            v-model="item.result"
            :disabled="disabled"
            placeholder="请选择"
            class="input"
            @change="handleChange"
          >
            <el-option
              v-for="dict in dict.type.env_task_accord"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="记录">
          <el-input
            v-model="item.remark"
            :disabled="disabled"
            type="textarea"
            class="input"
            placeholder="请输入内容"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            action="#"
            multiple
            class="input"
            list-type="picture-card"
            :disabled="disabled"
            :file-list="item.files"
            :auto-upload="false"
            :on-preview="previewFile"
            :before-remove="beforeRemoveFile"
            :on-remove="(file, fileList) => deleteFile(file, fileList, index)"
            :on-change="(file, fileList) => addFile(file, fileList, index)"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
        <el-form-item label="建议">
          <el-input
            v-model="item.advice"
            :disabled="disabled"
            type="textarea"
            class="input"
            placeholder="请输入内容"
            @change="handleChange"
          />
        </el-form-item>
      </el-collapse-item>
    </el-collapse>

    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import { saveAs } from 'file-saver'
import { isImage } from '@/utils'
import { deleteFile } from '@/api/system/file'

export default {
  name: 'HwStore',
  props: {
    disabled: Boolean,
    dict: {
      type: Object,
      default: () => ({})
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    handleChange() {
      this.$emit('input', this.value)
      this.$emit('change', this.value)
    },
    beforeRemoveFile(file) {
      return new Promise((resolve, reject) => {
        this.$modal.confirm(`确认删除？`).then(function() {
          resolve()
        }).catch(() => {
          reject()
        })
      })
    },
    async deleteFile(file, fileList, index) {
      if (file.id) {
        await deleteFile(file.id)
      }
      this.value[index].files = fileList
      this.handleChange()
    },
    addFile(file, fileList, index) {
      this.value[index].files.push(file)
      this.handleChange()
    },
    getFileBlobUrl(file) {
      if (window.createObjectURL) {
        return window.createObjectURL(file)
      } else if (window.URL) {
        return window.URL.createObjectURL(file)
      } else if (window.webkitURL) {
        return window.webkitURL.createObjectURL(file)
      }
    },
    previewFile(file) {
      if (file.raw) {
        if (file.raw.type.includes('image')) {
          const url = this.getFileBlobUrl(file.raw)
          this.dialogImageUrl = url
          this.dialogVisible = true
        } else {
          saveAs(file.raw)
        }
      } else if (isImage(file.url.split('.').pop())) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      } else {
        saveAs(file.url)
      }
    }
  }
}
</script>
